<template>
<div class="page-container">
    <div class="common-content">
        <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
        <div class="search-wrap">
            <el-form :inline="true" :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px" :rules="filtersRules">
                <el-row class="search-input">
                    <el-form-item label="商品：">
                        <el-input v-model="searchFilters.productName" placeholder="请输入商品编码或商品名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="创建日期：" prop="createTimeStart">
                        <el-date-picker v-model="searchFilters.createTimeStartAndEnd" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="单据编号：" label-width="116px">
                        <el-input v-model="searchFilters.documentsNumber" placeholder="请输入单据编号" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="仓库：" label-width="112px">
                        <el-input v-model="searchFilters.warehouseCode" placeholder="请输入仓库编码或仓库名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="事务单类型：">
                        <el-select v-model="searchFilters.sourceType" placeholder="全部">
                            <el-option label="全部" value=""></el-option>
                            <el-option v-for="item in selectedDicts" :key="item.id" :label="item.optionLabel" :value="item.id" clearable></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商家：">
                        <el-select v-model="searchFilters.deptId" placeholder="全部">
                            <el-option label="全部" value=""></el-option>
                            <el-option v-for="item in selectedOptionsData1" :key="item.id" :label="item.deptName" :value="item.id" clearable></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <!-- 搜索区域按钮-查询,重置 -->
                <el-row class="search-button">
                    <el-form-item>
                        <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                        <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                        <el-button type="primary" size="small" @click="excelDownLoad()">导出</el-button>
                    </el-form-item>
                </el-row>
                <!--<el-row class="t_r mb20">
                    <el-form-item>
                    </el-form-item>
                </el-row>-->
                <!-- 表格数据部分 -->
                <div class="table-wrap">
                    <jic-table :height="350" :operationWidth="200" :tableList="tableList" :tableHeaderList="tableHeaderList" :totalSize="totalSize" :showDetailOperation="false" :showBatchDelete="false" :showSelection="false" :showIndex="false" :showOperation="false" @findPage="findPage" @handleDetail="handleDetail" @handleSizeChange="handleSizeChange" @handlePageChange="handlePageChange" ref="jicTable"></jic-table>
                </div>
            </el-form>
        </div>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";
import {
    exportExcel
} from "@/utils/excel";
//二.数据输出区
export default {
    //2.1 注册组件
    components: {
        jicTable
    },

    //2.2 数据初始化区
    data() {
        var checkStartTime = (rule, value, callback) => {
            let this_ = this;
            if (value == null || typeof value == "undefined") {
                callback();
            }
            if (
                this_.searchFilters.createTimeEnd == null ||
                typeof this_.searchFilters.createTimeEnd == "undefined"
            ) {
                callback();
            }
            if (
                new Date(value).getTime() > new Date(this_.searchFilters.createTimeEnd).getTime()
            ) {
                callback(new Error("开始时间不能大于结束时间"));
            }
            this_.$refs.searchFilters.clearValidate("createTimeEnd");
            callback();
        };
        var checkEndTime = (rule, value, callback) => {
            let this_ = this;
            if (value == null || typeof value == "undefined") {
                callback();
            }
            if (
                this_.searchFilters.createTimeStart == null ||
                typeof this_.searchFilters.createTimeStart == "undefined"
            ) {
                callback();
            }
            if (
                new Date(value).getTime() < new Date(this_.searchFilters.createTimeStart).getTime()
            ) {
                callback(new Error("结束时间不能小于开始时间"));
            }
            this_.$refs.searchFilters.clearValidate("createTimeStart");
            callback();
        };
        return {
            selectedDicts: [],
            selectedOptionsData1: [],
            size: "mini",
            //2.2.1 公共数据初始化
            pageIndex: 0,
            pageSize: 10,
            totalSize: 0, //// 返回数据总条数
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            }, // 请求数据的参数
            tableList: [], // 表格列表数据
            searchSize: "mini",
            filtersRules: {
                createTimeStart: [{
                    validator: checkStartTime,
                    trigger: "change"
                }],
                createTimeEnd: [{
                    validator: checkEndTime,
                    trigger: "change"
                }]
            },
            // 2.2.2 表格表头数据
            tableHeaderList: [{
                    prop: "serialId",
                    label: "库存流水ID",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "deptName",
                    label: "商家",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "storeCode",
                    label: "仓库编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "storeName",
                    label: "仓库名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "productCode",
                    label: "商品编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "productName",
                    label: "商品名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "unitName",
                    label: "主计量单位",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "actualNum",
                    label: "数量",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "operateDesc",
                    label: "事物单类型",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "code",
                    label: "单据编号",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "createTime",
                    label: "创建时间",
                    minWidth: 100,
                    formatter: null
                }
            ], // 2.2.3 搜索表单对应的数据对象初始化
            searchFilters: {
                productName: null,
                documentsNumber: null,
                warehouseCode: null,
                createTimeStart: null,
                createTimeEnd: null,
                sourceType: null,
                deptId: null
            },
            dialogVisible: false //// 是否显示弹窗内容;
        }; //return 完结;
    }, //data()方法 完结;

    //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
    mounted() {
        this.findPage();
        this.listDictsOperate();
        let this_ = this;
        this.utils.request.queryDeptList({}, function (res) {
            if (res.code === "0000") {
                this_.selectedOptionsData1 = res.data;
            }
        });
    },
    //2.3 JavaScript 方法区
    methods: {
        //2.3.1 JavaScript 公共方法区
        //查询实物单据类型
        listDictsOperate() {
            let this_ = this;
            this.utils.request.queryDictsOperateList({}, function (res) {
                if (res.code === "0000") {
                    this_.selectedDicts = res.data;
                }
            });
        },
        //2.请求列表数据
        findPage(pageNum) {
            // 传过滤器的参数
            let this_ = this;
            if (this_.searchFilters === undefined || this_.searchFilters === null) {
                this_.searchFilters = {};
            }
            this_.searchFilters.pageNum =
                pageNum === null || pageNum === undefined ?
                this.pageRequest.pageNum :
                pageNum;
            this_.searchFilters.pageSize = this.pageRequest.pageSize;
            this.utils.request.findOperateListPage(
                this_.searchFilters,
                function (res) {
                    if (res.code === "0000") {
                        this_.tableList = res.data.rows;
                        this_.totalSize = Number(res.data.total);
                    } else {
                        this_.tableList = [];
                        this_.totalSize = 0;
                    }
                }
            );
        },

        // 3.重置搜索框条件
        resetForm(formName) {
            this.searchFilters = {};
            this.findPage(null);
        },

        // 4.详情按钮对应的方法(TODO 需要修改路径)
        handleDetail(params) {
            this.$router.push({
                path: "/SchoolDetail/" + params.row.id
            });
        },

        // 5.请求条数发生变化
        handleSizeChange(params) {
            this.pageRequest.pageSize = params.size;
        },

        // 6.请求页数发生变化
        handlePageChange(params) {
            this.pageRequest.pageNum = params.number;
            this.findPage();
        },
        // 7.页面弹窗处理方法
        add() {
            this.dialogVisible = true;
        },

        // 8.关闭弹窗
        handleClose() {
            this.dialogVisible = false;
        },

        excelDownLoad() {
            this.$confirm("确定下载列表文件?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    let this_ = this;
                    let fileName = "实体库存变动流水";
                    if (this_.searchFilters === undefined || this_.searchFilters === null) {
                        this_.searchFilters = {};
                    }
                    this.utils.request.listMStoreOperateExcel(this_.searchFilters, function (
                        res
                    ) {
                        if (res.code === "0000" && res.data.length < 10000) {
                            this_.tableList = res.data;
                            this_.totalSize = Number(res.data.length);
                        } else if (res.data.length > 10000) {
                            this_.$message({
                                message: "一次最多导出1万条，建议分配导出。",
                                type: "error"
                            });
                        } else if (res.code === "9999") {
                            this_.$message({
                                message: "没有数据，请重试",
                                type: "error"
                            });
                        }
                    });

                    exportExcel(this_.tableList, this_.tableHeaderList, fileName);
                    this_.findPage(null);
                })
                .catch(() => {});
        }

        //==========2.3.1 JavaScript 自定义方法区==========
    }
};
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
        width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}

.span {
    text-align: center;
    display: inline-block;
    line-height: 32px;
    margin-right: 20px;
}

// .mb20{
//   margin-bottom: 20px;
// }
</style>
